<template>
  <div>
    <!-- 顶部 -->
    <v-header :showback="true" :bg="dark" v-if="!$root.ISAPP">
      <div class="nav-tab2 ellipsis">{{title}}</div>
    </v-header>
    <!-- 认证成功 -->
    <div class="attestationSuccessBox" v-if="status === 1">
      <div class="content">
        <h2 class="tit">
          <img src="/static/img/bull/success1.png">
          <span>认证成功！</span>
        </h2>
        <p
          class="info"
        >恭喜您获得【斗牛球鞋券】{{idRes.productname}} {{idRes.size}} 码的购买资格，请在{{idRes.paytime}}分钟内完成支付！</p>
        <p class="exp">此商品为抢购性质，尺码随机发放，数量有限，超时未支付可能导致抢购失败！</p>

        <p class="tips">特殊预售商品，支付成功后暂不支持退款！ 可在“预售鞋券买卖区”进行转让～</p>
        <div class="pay_btn_box fix-btm">
          <p class="pay_btn" @click="pay">
            <span>支付</span>
            <span class="font-price">￥{{idRes.price}}</span>
          </p>
        </div>
      </div>
      <div class="ticket">
        <div class="ticket_box">
          <div class="ticket_left">
            <div>
              <img v-lazy="idRes.image">
            </div>
            <span class="tag">预售券</span>
          </div>
          <div class="ticket_right">
            <p class="size">{{idRes.size}}码</p>
            <div class="One-dimensional-code">
              <img src="/static/img/bull/barCode.png">
            </div>
            <p class="now_price_tit">购买价格</p>
            <p class="now_price">
              <span>￥</span>
              <em class="font-price">{{idRes.price}}</em>
            </p>
            <p class="timeExp">到手即可转让 到期可提货</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 支付成功页 -->
    <div class="attestationSuccessBox paySuccessBox" v-else-if="status === 2">
      <div class="content">
        <div class="pic_box">
          <img src="/static/img/bull/success2.png">
        </div>
        <h2 class="head">支付成功</h2>
        <div class="info" style="text-align: center;">
          <p>您的【斗牛球鞋券】已自动放入</p>
          <p>“我的资产-我的票据”中</p>
        </div>
        <div class="pay_btn_box fix-btm">
          <p class="pay_btn" @click="goUser()">去“我的资产”看看</p>
        </div>
      </div>
      <div class="ticket">
        <div class="ticket_box">
          <div class="ticket_left">
            <div>
              <img v-lazy="idRes.image">
            </div>
            <span class="tag">预售券</span>
          </div>
          <div class="ticket_right">
            <p class="size">{{idRes.size}}码</p>
            <div class="One-dimensional-code">
              <img src="/static/img/bull/barCode.png">
            </div>
            <p class="now_price_tit">购买价格</p>
            <p class="now_price">
              <span>￥</span>
              <em class="font-price">{{idRes.price}}</em>
            </p>
            <p class="timeExp">到手即可转让 到期可提货</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Identifysuccess } from "@/common/api/bull";
var loader;
export default {
  name: "TicketResult",
  data() {
    return {
      title: "获得购买资格",
      status: 0,
      idRes: {}
    };
  },
  beforeMount() {
    console.log(this.$route, this.$router);
    let _ = this,
      { code, status } = _.$route.query;
    _.setToolBar({ title: _.title });

    _.getIdentifyResult(code, status);

    window.callbackPay = (result, via) => {
      console.log("callbackPay res", result, via);
      loader.close();
      if (result == 1) {
        _.setPay();
        _.toast("支付成功~");
      } else _.toast("支付失败~");
    };
  },
  methods: {
    setPay() {
      let _ = this;
      _.status = 2;
      _.title = "支付成功";
      _.setToolBar({ title: _.title });
    },
    getIdentifyResult(code, status) {
      let _ = this;
      Identifysuccess({ code })
        .then(res => {
          console.log("Identifysuccess res", res);
          _.idRes = res;

          if (status == 2) _.setPay();
          else _.status = 1;
        })
        .catch(e => {
          _.toast(e && e.msg ? e.msg : "");
          setTimeout(function(){
            _.$router.go(-1)
          },800)
        });
    },
    pay() {
      let _ = this,
        { shoecouponid, price } = _.idRes;
      loader = _.loading("支付中...");
      setTimeout(loader.close, 5000);

      // 自测可用下面代码
      // window.callbackPay(1, "ios");
      // return;

      _.javascriptBridge({
        name: "callAppPayFromShoesCoupon",
        params: {
          paymoney: price,
          dataid: shoecouponid,
          callbackname: "callbackPay"
        }
      });
    },
    goUser() {
      this.javascriptBridge({ name: "goMyAsset" });
    }
  }
};
</script>
<style lang="scss" scoped>
.attestationSuccessBox {
  background: #fefefe;
  .ticket {
    padding: 0 15px;
  }
  .content {
    padding: 25px 30px 0;
    .pic_box {
      width: 152px;
      height: 101px;
      margin: 0 auto 10px;
      img {
        display: block;
        width: 152px;
        height: 101px;
      }
    }
    .tit {
      height: 30px;
      font-size: 22px;
      font-weight: 600;
      color: #333;
      line-height: 25px;
      margin-bottom: 50px;
      display: flex;
      align-items: center;
      padding-left: 80px;
      img {
        display: inline-block;
        width: 30px;
        height: 30px;
      }
      span {
        width: 140px;
        text-align: center;
      }
    }
    .info {
      font-size: 14px;
      font-weight: 600;
      color: #232323;
      line-height: 20px;
      margin-bottom: 5px;
    }
    .exp {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
      margin-bottom: 30px;
    }
  }
  .pay_btn_box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    // height: 70px;
    background: #fff;
    box-shadow: 0px -10px 15px 0px rgba(235, 235, 235, 0.5);
    padding: 10px 15px;
    .pay_btn {
      text-align: center;
      width: 100%;
      height: 50px;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
      background: #232323;
      border-radius: 2px;
      span {
        font-size: 18px;
      }
    }
  }
}
.paySuccessBox {
  .content {
    .head {
      height: 30px;
      font-size: 18px;
      font-weight: 600;
      color: #232323;
      line-height: 25px;
      margin-bottom: 50px;
      text-align: center;
      margin-bottom: 45px;
    }
    .info {
      margin-bottom: 30px;
    }
  }
}
.tips {
  position: fixed;
  bottom: 100px;
  left: 50%;
  right: 0;
  color: #ff655a;
  width: 70%;
  transform: translateX(-50%);
  font-size: 13px;
  text-align: center;
  line-height: 20px;
  &.tip {
    color: #8246dc;
  }
}
.ticket_box {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(200, 200, 200, 0.5);
  border-radius: 4px;
  padding: 10px 10px 10px 0;
  display: flex;
  .ticket_left {
    width: 100px;
    height: 110px;
    border-right: 1px dashed rgba(220, 220, 220, 1);
    position: relative;
    div {
      position: relative;
      width: 100%;
      height: 100%;
    }
    img {
      display: block;
      width: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -35%);
      z-index: 2;
    }
    span {
      width: 52px;
      height: 20px;
      background: rgba(35, 35, 35, 1);
      border-radius: 0px 3px 3px 0px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }
  }
  .ticket_right {
    flex: 1;
    height: 110px;
    padding-left: 10px;
    padding-top: 5px;
    position: relative;
    .size {
      position: absolute;
      right: 0;
      top: 5px;
      width: 100px;
      height: 30px;
      background: rgba(250, 250, 250, 1);
      border-radius: 2px;
      border: 1px dashed rgba(230, 230, 230, 1);
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: #232323;
      line-height: 30px;
    }
    .One-dimensional-code {
      position: absolute;
      right: 0;
      bottom: 10px;
      width: 60px;
      height: 24px;
      img {
        display: block;
        width: 60px;
        height: 24px;
      }
    }
    .now_price_tit {
      height: 20px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(35, 35, 35, 1);
      line-height: 20px;
    }
    .now_price {
      position: relative;
      margin-bottom: 10px;
      height: 46px;
      font-size: 28px;
      font-weight: 600;
      color: rgba(35, 35, 35, 1);
      line-height: 46px;
      span {
        position: absolute;
        top: 0;
        left: -6px;
        height: 24px;
        font-size: 28px;
        font-weight: 600;
        color: rgba(35, 35, 35, 1);
        line-height: 40px;
      }
      em {
        height: 40px;
        font-size: 32px;
        font-weight: bold;
        color: rgba(35, 35, 35, 1);
        line-height: 24px;
        padding-left: 20px;
      }
    }
    .timeExp {
      height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(100, 100, 100, 1);
      line-height: 16px;
    }
  }
}
</style>
